<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>图片切换器</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #father{
        width: 100%;
        position: relative;
    }
    #father #pic{
        position: absolute;
        left:560px;
        top:20px;
    }
    #father #two{
        position: absolute;
       left:680px;
        top:500px;
    }
    body{
        background-color: RGB(123,113,104);
    }
    #pic{
        position: relative;
        margin: 50px auto;
        margin-left:-220px;
    }
    #pic img{
        width: 1250px;
        height: 500px;
        border-radius:0px 0px 10px 10px;

    }
    #two span{
        position: absolute;
        width: 1250px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: rgba(61,50,48,0.5);
    }
    #pic p{
        position: absolute;
        width: 1250px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: rgba(61,50,48,0.5);
        color: white;
        font-size:18px;
        top:470px;
    }
    #two span{
        top: 100px;
        left:-340px;
        border-radius:10px 10px 0px 0px;
    }
    #pic p{
        bottom: 0px;
        border-radius: 0 0 10px 10px;
    }
    #pic ul{
        position: absolute;
        top:10px;
        left: 715px;
    }
    #pic li{
        list-style: none;
        width: 40px;
        height: 40px;
        background-color:#F2F2F2;
        margin-bottom:20px ;
        margin-left: 560px;
        border-radius: 10px;

    }
    #pic li.active{
        background-color:#333;
    }
    #three{
        position: absolute;
        top: 700px;
        left: 340px;
    }
    #four{
        position: absolute;
        top: 680px;
        left: 320px;
        font-weight: bold;
        font-size: 20px;
        color: white;
    }
    #five{
        position: absolute;
        top: 700px;
        left: 1040px;
    }
    #six{
        position: fixed;
        bottom: 40px;
        left: 20px;
    }

    #seven{
        position: absolute;
        top: 1170px;
        background-color: white;
        left: 340px;
    }
    #eight p{
        font-weight: bold;
        font-size: 20px;
        color: white;
        position: absolute;
        top: 1130px;
        left: 340px;
    }
    .table{
        border: 1px solid grey;
        border-left: 0px;
        border-right:0px;
        width: 1300px;
        font-size: 20px;
    }
    table tr {
        height: 40px;
        line-height: 40px;
    }
    #even table{
        float: left;
        position: fixed;
        top:10px;
        font-size: 20px;
        font-weight: bold;
        left: 340px;
        background-color: white;
        width: 1300px;
        height: 60px;
        border-radius: 10px 10px 0px 0px;
    }
    #ten{
        position: absolute;
        top: 1670px;
        background-color: white;
        left: 340px;
    }

    a{
        color: black;
        text-decoration: none;
    }
    #div2{
        position: absolute;
        top: 2175px;
        background-color: white;
        left: 340px;
    }
    #div3{
        position: absolute;
        top: 2685px;
        background-color: white;
        left: 340px;
    }
    #div4{
        position: absolute;
        top: 3200px;
        background-color: white;
        left: 340px;
    }
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(window).scroll(function () {
                $("#six").html("<video src=\"${pageContext.request.contextPath}/statics/mv/MV1.mp4\" autoplay=\"autoplay\" controls=\"controls\" width=\"300px\" height=\"300px\"  muted=\"muted\" loop=\"loop\"></video>");
                $("#div1").html("<p  style=\"position: fixed;bottom: 280px;left: 280px;color: red;\" onclick=\"hideSix();\">关闭</p>");
    });
    $(function () {
         $(".table tr:even").css("background-color","#66F4DF");
        window.onload = function(){
            var oDiv = document.getElementById("pic");
            var tDiv=document.getElementById("two");
            var oImg = oDiv.getElementsByTagName('img')[0];
            var oSpan = tDiv.getElementsByTagName('span')[0];
            var oP = oDiv.getElementsByTagName('p')[0];
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var oLi = oUl.getElementsByTagName('li');
            /*,'img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'*/
            var arrSrc = ['${pageContext.request.contextPath}/statics/img/1.jpg',
                '${pageContext.request.contextPath}/statics/img/3.jpg',
                '${pageContext.request.contextPath}/statics/img/5.jpg',
                '${pageContext.request.contextPath}/statics/img/9.jpg',
                '${pageContext.request.contextPath}/statics/img/4.png',
                '${pageContext.request.contextPath}/statics/img/2.jpg',
                '${pageContext.request.contextPath}/statics/img/13.jpg',
                '${pageContext.request.contextPath}/statics/img/6.jpg'
            ];
            /*,'图片描述：第二张','图片描述：第三张','图片描述：第四张','图片描述：第五张'*/
            var arrText = ['智渊酒店：一家专注于服务的酒店','大圆床房：让你体验全方位无死角的滚床单的快感',
                '双人房：灯光柔和,制造属于你们的温馨','豪华房：让自己生活变得有品位的房间',
                '商务房：隔音良好网速飞起，配套齐全','海景房：可以躺着看日出、日落、吹海风的房间',
                '餐厅：宽创明亮,配备五星大厨,兔女郎服务员','温泉：露天温泉,更亲近自然,更亲近你我'];

            //一般有数组就需要一个值
            var num = 0;
            var oldLi = 0;

            //初始化
            oSpan.innerHTML = num+1 +" / "+ arrSrc.length;
            oImg.src = arrSrc[num];
            oP.innerHTML = arrText[num];
            for(var i=0;i<arrSrc.length;i++){
                oUl.innerHTML += '<li></li>';
            }
            oLi[oldLi].className = 'active';
            //切换图片
            for(var i=0;i<arrSrc.length;i++){
                //自定义属性，一一对应
                oLi[i].index = i;
                oLi[i].onclick = function(){
                    var id = this.index;
                    //通过自定义的属性设置对应的信息
                    oImg.src = arrSrc[id];
                    oP.innerHTML = arrText[id];
                    oSpan.innerHTML = id+1 +" / "+ arrSrc.length;

                    oLi[oldLi].className = '';
                    oldLi = id;
                    this.className = 'active';
                }
            }
        }
    });
    function hideSix(){
       $("#six").hide();
       $("#div1").hide();
    }
    //可视窗口高度
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        console.log("windowHeight:"+windowHeight);
        return windowHeight;
    }

    //滚动条滚动高度
    function getScrollHeight() {
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        console.log("scrollHeight:"+scrollHeight);
        return scrollHeight;
    }
    //文档高度
    function getDocumentTop() {
        var scrollTop =  0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        console.log("scrollTop:"+scrollTop);
        return scrollTop;
    }
</script>
<body>
<div id="father">
    <div id="pic">
        <img src="${pageContext.request.contextPath}/statics/img/1.jpg">
        <p>图片描述正在加载中...</p >
        <ul>
            <!--<li class="active"></li>-->
        </ul>
    </div>
    <div id="two">
        <span>- / -</span>
    </div>
    <div id="four"><p>酒店简介视频</p></div>
    <div id="three">
        <video src="${pageContext.request.contextPath}/statics/mv/MV1.mp4" autoplay="autoplay" controls="controls" width="600px" height="400px"  muted="muted" loop="loop"></video>
    </div>
    <div id="five">
        <video src="${pageContext.request.contextPath}/statics/mv/MV2.mp4" autoplay="autoplay" controls="controls" width="600px" height="400px"  muted="muted" loop="loop"></video>
    </div>
    <div id="six">

    </div>

    <div id="seven">
       <table cellspacing="0px" cellpadding="0px" border="1px" class="table">
           <caption><p style="background-color: lightskyblue;color: white;font-size: 20px;font-weight: bolder;width: 1300px;height: 45px;line-height: 45px">单&nbsp;&nbsp;&nbsp;&nbsp;人&nbsp;&nbsp;&nbsp;&nbsp;房</p></caption>
           <tr>
               <th>房间号</th>
               <th>价格/元</th>
               <th>是否入住</th>
               <th>描述</th>
               <th>操作</th>
           </tr>
           <c:forEach items="${danRoom}" var="li">
               <tr>
                   <td style="text-align: center">${li.roomNo}</td>
                   <td style="text-align: center">${li.price}</td>
                   <td style="text-align: center">${li.isMove}</td>
                   <td style="text-align: center">${li.rDespertion}</td>
                   <td style="text-align: center"><a href="${pageContext.request.contextPath}/toSchedule?rId=${li.rId}">${li.isSchedule}</a></td>
               </tr>
           </c:forEach>
       </table>
    </div>
    <div id="eight"><p><a name="yu" style="color: white">酒店预订</a></p></div>
    <div id="even">
        <table>
            <tr>
                <td><a href="${pageContext.request.contextPath}/index">&nbsp;&nbsp;&nbsp;&nbsp;首页</a></td>
                <td><a href="#yu">预订酒店</a></td>
                <td><a href="${pageContext.request.contextPath}/xiaoFei">消费记录</a></td>
                <td><a>我的</a></td>
            </tr>
        </table>
    </div>
    <div id="ten">
        <table cellspacing="0px" cellpadding="0px" border="1px" class="table">
            <caption><p style="background-color: lightskyblue;color: white;font-size: 20px;font-weight: bolder;width: 1300px;height: 45px;line-height: 45px">双&nbsp;&nbsp;&nbsp;&nbsp;人&nbsp;&nbsp;&nbsp;&nbsp;房</p></caption>
            <tr>
                <th>房间号</th>
                <th>价格/元</th>
                <th>是否入住</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${shuangRoom}" var="li">
                <tr>
                    <td style="text-align: center">${li.roomNo}</td>
                    <td style="text-align: center">${li.price}</td>
                    <td style="text-align: center">${li.isMove}</td>
                    <td style="text-align: center">${li.rDespertion}</td>
                    <td style="text-align: center"><a href="${pageContext.request.contextPath}/checkSchedule?rId=${li.rId}&isSchedule=${li.isSchedule}&isMove=${li.isMove}">${li.isSchedule}</a></td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <div id="div1">

    </div>
    <div id="div2">
        <table cellspacing="0px" cellpadding="0px" border="1px" class="table">
            <caption><p style="background-color: lightskyblue;color: white;font-size: 20px;font-weight: bolder;width: 1300px;height: 45px;line-height: 45px">豪&nbsp;&nbsp;&nbsp;&nbsp;华&nbsp;&nbsp;&nbsp;&nbsp;房</p></caption>
            <tr>
                <th>房间号</th>
                <th>价格/元</th>
                <th>是否入住</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${haoRoom}" var="li">
                <tr>
                    <td style="text-align: center">${li.roomNo}</td>
                    <td style="text-align: center">${li.price}</td>
                    <td style="text-align: center">${li.isMove}</td>
                    <td style="text-align: center">${li.rDespertion}</td>
                    <td style="text-align: center"><a href="${pageContext.request.contextPath}/checkSchedule?rId=${li.rId}&isSchedule=${li.isSchedule}&isMove=${li.isMove}">${li.isSchedule}</a></td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <div id="div3">
        <table cellspacing="0px" cellpadding="0px" border="1px" class="table">
            <caption><p style="background-color: lightskyblue;color: white;font-size: 20px;font-weight: bolder;width: 1300px;height: 45px;line-height: 45px">商&nbsp;&nbsp;&nbsp;&nbsp;务&nbsp;&nbsp;&nbsp;&nbsp;房</p></caption>
            <tr>
                <th>房间号</th>
                <th>价格/元</th>
                <th>是否入住</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${shangRoom}" var="li">
                <tr>
                    <td style="text-align: center">${li.roomNo}</td>
                    <td style="text-align: center">${li.price}</td>
                    <td style="text-align: center">${li.isMove}</td>
                    <td style="text-align: center">${li.rDespertion}</td>
                    <td style="text-align: center"><a href="${pageContext.request.contextPath}/checkSchedule?rId=${li.rId}&isSchedule=${li.isSchedule}&isMove=${li.isMove}">${li.isSchedule}</a></td>
                </tr>
            </c:forEach>
        </table>
    </div>
    <div id="div4">
        <table cellspacing="0px" cellpadding="0px" border="1px" class="table">
            <caption><p style="background-color: lightskyblue;color: white;font-size: 20px;font-weight: bolder;width: 1300px;height: 45px;line-height: 45px">海&nbsp;&nbsp;&nbsp;&nbsp;景&nbsp;&nbsp;&nbsp;&nbsp;房</p></caption>
            <tr>
                <th>房间号</th>
                <th>价格/元</th>
                <th>是否入住</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            <c:forEach items="${haiRoom}" var="li">
                <tr>
                    <td style="text-align: center">${li.roomNo}</td>
                    <td style="text-align: center">${li.price}</td>
                    <td style="text-align: center">${li.isMove}</td>
                    <td style="text-align: center">${li.rDespertion}</td>
                    <td style="text-align: center"><a href="${pageContext.request.contextPath}/checkSchedule?rId=${li.rId}&isSchedule=${li.isSchedule}&isMove=${li.isMove}">${li.isSchedule}</a></td>
                </tr>
            </c:forEach>
        </table>
    </div>

</div>
</body>
</html>
